import React, { useState, useEffect } from 'react';
import request,{baseUrl} from "@/utils/request";
import { Image, Stepper, Notify } from 'react-vant'
import { connect } from 'react-redux'


// 购物车详情页
let CartLists = (props) => {

    const { getCartList } = props;

    const { cartList } = props;

    const { user } = props;

    const { addData } = props;

    // 修改购物车数量
    const subData = async (dishes_id, qty) => {
        const { data } = await request.post('/cart/updateData', {
            username: user.username,
            dishes_id,
            qty: qty * 1 - 1
        })
        if (qty === 1) {
            const { data } = await request.post('/cart/deleteData', {
                username: user.username,
                dishes_id,
            })
            if (data.code == 200) {
                Notify.show({ type: 'success', message: '商品已从已选商品中移除' })
            }
        }
        getCartList();
    }

    return (
        <div className='cartList'>
            {
                cartList.length!=0
                ?
                cartList.map((item, idx) => {
                    return (
                        <div className='orderList' key={item.dishes_id}>
                            <Image width='50' height='50' src={item.dishes_img} fit="cover" />
                            <div className='dishes'>
                                <div className='dishesPrice'>
                                    <span>{item.dishes_name}</span>
                                    {
                                        item.sales_price
                                            ?
                                            <p>
                                                <del>￥{item.price}</del><span>￥{item.sales_price}</span>
                                            </p>
                                            :
                                            <p>
                                                <span>￥{item.price}</span>
                                            </p>
                                    }
                                </div>
                                <div className='addSub'>
                                    <Stepper
                                        key={item.dishes_id}
                                        value={item.qty}
                                        theme='round'
                                        buttonSize='22'
                                        disableInput
                                        onPlus={addData.bind(null, item.dishes_id)}
                                        onMinus={subData.bind(null, item.dishes_id, item.qty)}
                                    />
                                </div>
                            </div>
                        </div>
                    )
                })
                :
                <div style={{height:'30vh',display:'flex',justifyContent:'center',alignItems:'center'}}>
                    <span>暂无已选商品</span>
                </div>
            }
        </div>
    )
}
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}
CartLists = connect(mapStateToProps)(CartLists)
export default CartLists